<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>About AsyncX</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/main.css" />
  <noscript>
    <link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  <link rel="icon" href="image/1.ico" type="image/x-icon">
  <link rel="shortcut icon" href="image/1.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="fonts.css">
  <script type="text/javascript" src="js/dat.gui.min.js"></script>
  <script type="text/javascript" src="js/p5.min.js"></script>
  <script type="text/javascript" src="js/gif.js"></script>
  <script type="text/javascript" src="js/p5.dom.min.js"></script>
  <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <input id="img-path" type="file" />
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    #credits {
      font-size: 12px;
      position: absolute;
      bottom: -25px;
      right: 15px;
      opacity: 0.6;
      color: #ffffff;
      max-width: 70%;
      text-align: right;
      line-height: 20px;
    }

    .logo {
      font-size: 12px;
      position: absolute;
      bottom: 80px;
      left: 25px;
      color: #ffffff;
      max-width: 70%;
      line-height: 20px;
      opacity: 0.7;
    }

    .iconlink {
      bottom: 50px;
      margin-right: 0px;
    }

    #img-path {
      display: none;
    }
  </style>

  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?44f8fa2f0b239ea3093628142486b48a";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</head>

<body class="is-preload">
  <div id="wrapper">
    <div id="bg"></div>
    <div id="overlay"></div>
    <div id="main">

      <!-- Header -->
      <header id="header">
        <h1>AsyncX</h1>
        <h2>的主页</h2>
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = " ", o = ["总有人间一两风，填我十万八千梦." ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>
        <nav>
          <ul>
            <li><a href="https://www.asyncx.top/" class="fa fa-user-circle-o" title="博客"><span class="label"></span></a></li>
            <li><a href="https://gitee.com/asyncx" class="fa fa-git-square" title="Gitee"><span class="label"></span></a></li>
            <li><a href="https://github.com/CykaOWO" class="fa fa-github" title="Github"><span class="label"></span></a></li>
            <li><a href="https://steamcommunity.com/id/1158271328/" class="fa fa-steam" title="Steam好友代码：359500238"><span class="label"></span></a></li>
            <li><a href="https://www.asyncx.top/index.php/33.html" class="fa fa-sticky-note" title="留言板"><span class="label"></span></a></li>
            <!-- <li><a href="https://www.asyncx.top/" class="fa fa-user-circle-o" title="博客"><span class="label"></span></a></li> -->
            <!-- <li><a href="https://www.asyncx.top/" class="fa fa-user-circle-o" title="博客"><span class="label"></span></a></li> -->
            <ul>
              <li><a href="pages/building.html">一些尝试</a></li>
              <li><a class="navtitle" href="pages/building.html">关于我</a></li>
              <!-- <li><a class="navtitle" href="designtools.html">设计神器</a></li>	 -->
              <!-- <li><a class="navtitle" href="dailyPractice.html">日常练习</a></li>				 -->
              <!-- <li><a class="navtitle" href="aboutme.html">关于我</a></li> -->
          </ul>
          </ul>
        </nav>
      </header>
      <!-- Footer -->
      <footer id="footer">
        豫ICP备2021014443号丨联系邮箱:asyncx@asyncx.top
      </footer>

    </div>
  </div>
  <script>
    window.onload = function () {
      document.body.classList.remove('is-preload');
    }
    window.ontouchmove = function () {
      return false;
    }
    window.onorientationchange = function () {
      document.body.scrollTop = 0;
    }
  </script>


  <!-- <div id="credits"> 
  <div class = "socaial" style="margin-right:10px">Created by @Yasai</div>
  <div class = "socaial" style="margin-right:10px; margin-bottom: -40px">©️All my products may be used in both personal and commercial projects   </div>
  <div class ="iconlink"> 
    <span><a class="icon-weibo" href="https://weibo.com/psaiaevegas/profile?rightmod=1&wvr=6&mod=personnumber"  target="_blank"  data-icon="&#xe906;" ></a></span>
    <span><a class="icon-zhihu" href="https://www.zhihu.com/people/wang-ya-sai/activities"  target="_blank"  data-icon="&#xe907;"></a></span>
    <span><a class="icon-instagram" href="http://instagram.com/yasaisai"  target="_blank"  data-icon="&#xe903;"></a></span>
    <span><a class="icon-twitter" href="https://twitter.com/yasai_wang"  target="_blank"  data-icon="&#xe905;"></a></span>
  </div> -->

  </div>
  <script type="text/javascript">
    var type;
    var options = {
      Background: '#0a0a0a',
      Color1: '#ffffff',
      Color2: '#0799f2',
      Color3: '#45217c',
      Length: 10,
      Nums: 400,
      Size: 2,
      noiseScale: 800,
      ColorMode: 'Normal',
      Random: function () {
        var Length = random(1, 50);
        LengthControl.setValue(Length);

        var Nums = random(200, 1000);
        NumsControl.setValue(Nums);

        var noiseScale = random(200, 4000);
        noiseControl.setValue(noiseScale);

        var Size = random(1, 4);
        SizeControl.setValue(Size);

        var Cmode = random(['Normal', 'Linera Gradient', 'Splice']);
        ColorControl.setValue(Cmode);

        setup();
      },

      Save: function () {
        saveFrames("Perlin-Noise", "png", 1, 1);
      },
    }


    var text, gui, config, bgcolorControl, color1Control, color2Control, noiseControl, LengthControl, NumsControl,
      SaveControl, RandomControl, SaveControl, ColorControl;
    //   window.onload = function() {
    //     document.getElementById('defaultCanvas0').onmousedown = function(e) {
    //         // 阻止默认行为并取消冒泡
    //         if(typeof e.preventDefault === 'function') {
    //           e.preventDefault();
    //           e.stopPropagation();
    //         }else {
    //           e.returnValue = false;
    //           e.cancelBubble = true;
    //         }
    //       }
    //       gui = new dat.GUI();

    //   //folder1
    //   var folder1 = gui.addFolder('Controls');

    //   bgcolorControl = folder1.addColor(options, 'Background');
    //   bgcolorControl.onChange(draw);

    //   ColorControl = folder1.add(options, 'ColorMode', ['Normal','Linera Gradient','Radial Gradient','Splice'] );

    //   color1Control = folder1.addColor(options, 'Color1');
    //   color1Control.onChange(draw);

    //   color2Control = folder1.addColor(options, 'Color2');
    //   color2Control.onChange(draw);

    //   color2Control = folder1.addColor(options, 'Color3');
    //   color2Control.onChange(draw);

    //   noiseControl = folder1.add(options, 'noiseScale',10,5000);
    //   noiseControl.onChange(draw);

    //   LengthControl = folder1.add(options, 'Length',0.1,50);
    //   LengthControl.onChange(draw);

    //   NumsControl = folder1.add(options, 'Nums',100,2500);
    //   NumsControl.onChange(draw);

    //   SizeControl = folder1.add(options, 'Size',1,5);
    //   SizeControl.onChange(draw);


    //   RandomControl = folder1.add(options, 'Random');

    //   SaveControl = folder1.add(options, 'Save');

    //   folder1.open();
    // };
  </script>

  <script type="text/javascript" src="js/sketch.js"></script>

</body>

</html>